準備考試，直接來，不廢話。

1. Sticky Nav

• 短短幾行效果這麼好，學到了
• width不能做transition, 要用max-width

const nav = document.querySelector('#main')
const TopofNav = nav.offsetTop

function fixNav(){
  if (window.scrollY >= TopofNav) {
    document.body.style.paddingTop = nav.offsetHeight + 'px'
    document.body.classList.add('fixed-nav')
  }else {
    document.body.style.paddingTop = 0
    document.body.classList.remove('fixed-nav')
  }
}

window.addEventListener('scroll', fixNav)

2. Event Capture, Propagation, Bubbling and Once

• capture:true top-down 上到下 預設為false
• e.stopPropagation() stop bubbling up
• once 觸發一次後就會unbind listener = removeEventListener 所以只會執行一次！
• 參考資料：
  • (1)
  • (2)
  • 推薦

const divs = document.querySelectorAll('div')

function logText(e) {
  //e.stopPropagation()
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener('click', logText, {
  capture: false,
  once: true
}))